<template>
	<view class="box">
		<view class="data1">
			<text>手机号</text>
			<text>{{data[0].phone}}</text>
		</view>
		<view class="data1" @click="reset">
			<text>修改密码</text>
			<uni-icons type="right" color="#AFAFAF" size="20"></uni-icons>
		</view>
		<view class="data2">
			<view>第三方账号绑定</view>
			<view class="data22">
				<text>微信</text>
				<view class="but">绑定</view>
			</view>
		</view>
		<view class="data1" @click="flg=true">
			<text>注销账号</text>
			<uni-icons type="right" color="#AFAFAF" size="20"></uni-icons>
		</view>
		<view class="show" v-show="flg">
			<view class="text">
				<view class="">
					请勿随意注销哦，注销后所有票卷、票款等信息全部清空，注销后账号不支持恢复
				</view>
				<view class="text2">
					<text>需要注销</text>
					<text @click="flg=false">取消</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	let flg = ref(false)
	let data = ref(JSON.parse(localStorage.getItem('data')))
	let reset=()=>{
		uni.navigateTo({
			url:"/pages/reset/reset"
		})
	}
</script>

<style scoped lang="scss">
	.box {
		.show {
			width: 750rpx;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.3);
			position: fixed;
			bottom: 0;

			.text2 {
				width: 250rpx;
				float: right;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				color: #2CAA63;
			}

			.text {
				width: 650rpx;
				height: 300rpx;
				background-color: #fff;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				padding: 60rpx;
				box-sizing: border-box;


			}
		}

		.data2 {
			width: 750rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			height: 200rpx;
			background-color: #fff;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #EFEFEF;

			view:nth-child(1) {
				font-size: 25rpx;
				color: #9D9D9D;
				margin-bottom: 20rpx;
			}

			.data22 {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text:nth-child(1) {
					color: #989898;
				}

				view {
					width: 150rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					border-radius: 60rpx;
					border: 1px solid #2CAA63;
					color: #2CAA63;
				}
			}
		}

		.data1 {
			width: 750rpx;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			justify-content: space-between;
			border-bottom: 1px solid #EFEFEF;

			text:nth-child(1) {
				color: #787878;
			}

			text:nth-child(2) {
				color: #2CAA63;
			}
		}

		width: 750rpx;
		height: calc(100vh - 90rpx);
		background-color: #F1F1F1;
	}
</style>